<div data-role="content">
    <p class="event-process-location">
        <span class="event-supplier-loc">Event Details </span>|
        <span class="event-supplier-loc"> Event Supplier </span>|
        <span class="event-supplier-loc current"> Event Checklist </span>|
        <span class="event-supplier-loc"> Event Task(s) </span>|
    </p>
        <form class="ui-grid-a" style="border: solid 1px #CCC; border-radius: 0.5em" id="add-new-cat-form">
        <div class="ui-block-a" style="width: 74%;margin-left: 1%;margin-top: 0.2em;"><input type="text" name="category" placeholder="New category name" id="general-checklist-cat-name" /></div>
        <div class="ui-block-b" style="width: 25%"><a href="#" data-role="button" data-icon="plus" id="btn-new-cat">Add</a></div>
    </form>
    <?php foreach ($category as $item) { ?>
    <div class="ui-grid-a">
        <div class="ui-block-a" style="width: 85%">
            <div data-role="collapsible" class="checklist-category" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-r" style="border-radius: 0.3em">
                <h2><?php echo $item['category_name']?></h2>
                <ul data-role="listview" data-icon="delete" class="checklist-sub-cat" data-catid="<?php echo $item['category_id']?>">
                    <li class="add-sub-cat-container" style="padding: 0">
                        <form class="ui-grid-a add-new-sub-cat-form">
                            <input type="hidden" name="sub-cat-id" value="<?php echo $item['category_id']?>" />
                            <div class="ui-block-a" style="width: 74%;margin-left: 1%;margin-top: 0.2em"><input type="text" name="sub-category" placeholder="New sub-category name" class="new-sub-cat-name" /></div>
                            <div class="ui-block-b" style="width: 25%"><a href="#" data-role="button" class="btn-add-new-sub-cat" data-icon="plus">Add</a></div>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
        <div class="ui-block-b" style="width: 10%">
            <a href="#delete-cat-popup" data-role="button" data-icon="delete" data-iconpos="notext" style="margin-top: 1em" 
               data-rel="popup" data-transition="slideup" data-catid="<?php echo $item['category_id']?>" class="delete-cat-popup">Delete</a>
        </div>
    </div>
    <?php } ?>
    <div data-role="popup" data-overlay-theme="a" data-position-to="window" id="delete-cat-popup" data-dismissible="false"> 
        <div data-role="header">
            <p class="p-reformat">Delete Category</p>
        </div>
        <div data-role="content">
            <h3>Are you sure you wan't to delete this category?</h3>
            <p>This action cannot be undone.</p>
            <div class="btn-wrapper-right btn-position-center">
                <a href="#" data-role="button" data-inline="true" class="ui-btn-active btn-yes">Yes</a>
                <a href="#" data-rel="back" data-role="button" data-inline="true">No</a>
            </div>
        </div>
    </div>
    <div data-role="popup" data-overlay-theme="a" data-position-to="window" id="delete-sub-cat-popup" data-dismissible="false"> 
        <div data-role="header">
            <p class="p-reformat">Delete Sub Category</p>
        </div>
        <div data-role="content">
            <h3>Are you sure you wan't to delete this sub category?</h3>
            <p>This action cannot be undone.</p>
            <div class="btn-wrapper-right btn-position-center">
                <a href="#" data-role="button" data-inline="true" class="ui-btn-active btn-yes">Yes</a>
                <a href="#" data-rel="back" data-role="button" data-inline="true">No</a>
            </div>
        </div>
    </div>
    <div class="btn-next-container">
        <a href="#info-msg" data-role="button" data-rel="popup" data-transition="slideup" data-inline="true" class="btn-next">Next</a> 
    </div>
    <div data-role="popup" id="info-msg" data-overlay-theme="c" data-dismissible="true" data-position-to="window" class="popup-form">
        <div data-role="header">
            <p class="p-reformat">Confirmation Message</p>
        </div>
        <div data-role="content">
            <p>You cannot go back to this page after you click <b>"Next"</b> but you can edit it after you finish creating the event.</p>
            <div class="btn-wrapper-right">
                <a href="<?php echo site_url();?>event/event-task" data-role="button" data-transition="slide"data-inline="true" class="next ui-btn-active">Yes</a> 
                <a href="#" data-rel="back" data-role="button" data-inline="true">No</a> 
            </div>
        </div>
    </div>
</div>